Flip Image Transitions (HTML/CSS/Javascript) - easily tailored

Elusien · 2023-01-06T14:26:28.373Z

OK, another (Orthodox this time) Christmas present for the forum.

I’ve put together an HTML file that accepts various parameters and transitions two images as if flipping pages in a book. Some of the parameters relate to properties than can be animated, such as opacity, scale, rotation etc. Play around with them and see what you can come up with. You need to provide it with two or more images.

I have an example below and the HTML file is also below, just remove the ‘.txt’ suffix and run it in a browser and use screen-recording software, like Sharex, to record it.

Or, run it as a “Browser Source” in OBS Studio, recording the animation and then open this clip in Shotcut.

Flip_images.html.txt (11.1 KB)

Namna · 2023-01-06T16:52:55.992Z

Magnifique !!

J’ai l’impression que la fonction ease n’est pas fonctionnelle.
Je ne vois pas de différence entre toutes les valeurs, j’ai l’impression qu’il utilise tout le temps ease: out

I have the impression that the ease function is not functional.
I don’t see any difference between all the values, I have the impression that it uses ease: out all the time

jonray · 2023-01-06T18:25:27.960Z

@elusien - I think you must be psychic - this is PERFECT for my upcoming flute videos:

I’ll be putting it to good use.

Thank you and of course, bravo as usual…

Elusien · 2023-01-06T18:49:27.252Z

Namna:

I have the impression that the ease function is not functional.

Thank you for spotting this. I have fixed it in the download file in Post #1.

Merci d’avoir repéré cela. Je l’ai corrigé dans le fichier de téléchargement du message n ° 1 ci-dessus.

jonray · 2023-01-06T18:53:04.046Z

@elusien - recently I made a similar HTML file … see demo video… but yours is more effective. The sheet music is easier to read with yours… (although to be fair, the advantage of mine is that I wanted to show flute-players the content of the sheet music without having the music stop too long for them to be able to take screen-shots of the score - I want them to purchase it instead!!

Having said that, it is easy to adapt mine so the music pauses at each turn.

@elusien, notice my code has my now trade-mark LENGTHY, complicated code!! I still can’t find the knack of simplifying code like you excel at!

The HTML file is below (remove the fake TXT extension) if anyone would like to experiment with it.
NOTE- you can use any photo of your choice with this HTML file. You’ll just need to replace the file-names of your photos in this section:

Spinning HTML code for photos894×649 130 KB

Carols Galore DUET SPINNING effect 02 (14 flips or 15 pages only).html.txt (8.3 KB)

Elusien · 2023-01-06T19:02:09.957Z

jonray:

I wanted to show flute-players the content of the sheet music without having the music stop too long

There’s nothing to stop them pausing the play.

However, why not add a blur/mosaic (or my favourite) a spot-removal filter across a swathe along the central horizontal line instead to make that part unreadable?

jonray · 2023-01-06T19:04:02.520Z

Nice idea! I will try that…

Elusien · 2023-01-06T19:04:48.180Z

See below for a short tutorial:

spamless · 2023-01-12T22:58:19.918Z

Fantastic stuff! Thank you.

Motim · 2023-01-21T19:26:29.590Z

Hello,
I do know nothing about HTML, but I saw that “Flip image Transitions…” short video and like it. So downloaded the “Flip_images.html.txt” file, removed the .txt from file’s name and opened it in the notepad.
Replaced the 3 image names with my 3 image files, each one in double quotes and commas as noted, Saved it as html file. The images and the html file in the same folder, but it does not work.
Can you please explain exactly where to ‘put’ the file names.
Answers will be appreciated.
Thanks
Motim

Elusien · 2023-01-21T20:55:38.691Z

The text from line 15 onwards is:

const images = [    // Set the strings below to the names of your images (You can have as many as you like, they don't have to be called img0.JPG... etc., do not forget the commas and the quotes)
                    // N.B. DO NOT have single-quotes (') in any of your filenames.
      'Pool.JPG'
    , 'Bar.JPG'
    , 'Sunset.JPG'

];

All you need to do is edit the 3 lines with the JPG filenames, e.g.

      'Car.jpg'
    , 'Train.jpg'
    , 'Boat.JPG'
    , 'Plane.JPG'

The names are enclosed in single- (or double-) quotes and all but the first name have a comma before them. This should work. Can you post those lines in a reply so I can see?

Motim · 2023-01-22T08:17:43.119Z

Hello,
Thanks for the detailed answer.
Doing some experiments.
Here attached one experiment in a smal zip file, containing the ‘modified’ html file and the image files, per your request.
Thanks again
Motim
Flip-Experiment.zip (1.5 MB)

Elusien · 2023-01-22T08:50:52.930Z

The slideshow looks good in my Chrome browser. Nicely done. So can I check - is everything OK now?

Motim · 2023-01-22T09:42:17.765Z

Hello,
So far everything is OK.
Only some qestions with your permision:

In a long slideshow (say a 100 images), is it possible to ‘pause’ it like pausing a video in a player ?
How to change duration of the flip, and duration of the image stay (not moving) ?
Hope I do not bother with my questions.
Thanks again.
Motim

jonray · 2023-01-22T14:51:26.473Z

Hi @motim, your slideshow looks really great!

@elusien, I noticed in @motim’s slideshow the nice bevelled border. I presume that is due to:

   .flip-card
   {border          : 3px inset #cccccc;}

?

Cool!

Elusien · 2023-01-22T14:52:31.014Z

Glad to hear you got it working.

To pause, I would have to change the code. I could either have a small Pause-Play button that you would click, or just look for a click anywhere on the image and Pause/Play.
From line 26 onwards (in the original file) there are parameters you can change, to tailor the slideshow to your needs. The parameters you need to alter are:

    --transition_time  : 2.5;       /* time in secs of the transition from one image to the next */
    --viewing_time     : 3;         /* time in secs that an image is visible before the transition to the next image takes place */

Elusien · 2023-01-22T16:09:27.187Z

Below is a new version of the HTML file. It has a parameter:

    --play_pause_button: false;     /* true or false: true - a button is created that can pause and then play the animation; false - clicking anywhere on the webpage will pause/play the slideshow */

If you set it to true a small play-pause button will appear underneath the slides, clicking it will pause the slideshow, clicking it again will resume it…
If you set it to false, then clicking anywhere on the webpage will pause the slideshow, clicking again will resume it.

Flip_images.html.txt (12.3 KB)

Motim · 2023-01-22T17:04:48.980Z

Hello,
Did not do anything, just followed the instructions, but Thanks.
All the best.
Motim

jonray · 2023-01-22T18:23:24.539Z

@elusien, wow, top-class service! The play/pause button is a brilliant addition.
Just two things - the button lies adjacent to the bottom edge of the images which would make it difficult to crop in SC if I need to… also when clicking the button on/off, the image jumps SLIGHTLY. To rectify this, I’ve amended the CSS by adding this (giving the button a width and height, and adding a margin-top):

  button {
  color: rgb(14, 179, 250);
  text-align: center;
  margin-top:20px;
width:50px;
height:50px;
 }

Seems to work. Is this OK? Did I do the right thing?
Amended version:
Flip_images - amended_JR - Copy.html.txt (12.4 KB)

Elusien · 2023-01-22T18:39:31.948Z

Thanks jon, I was in a bit of a hurry to get it done before I had dinner, so missed out on the formatting. I’ve updated the download file in my earlier post to include your changes.

ADVERTISEMENT

Flip Image Transitions (HTML/CSS/Javascript) - easily tailored